<template>
  <div class="content">
    <el-row class="grid-content bg-purple-dark">
      <el-col :span="1">
        <span class="el-icon-search" style="margin-top: 15px;"></span>
      </el-col>
      <el-col :span="2" style="margin-top: 10px;">
        筛选查询
      </el-col>
      <el-col :span="12">
        创建时间
        <el-date-picker v-model="defectCondition.createStarttime" @change="changeStartTime" type="date" placeholder="开始日期"
          :picker-options="pickerOptions0">
        </el-date-picker>
        <el-date-picker v-model="defectCondition.createndtime" @change="changeEndTime" type="date" placeholder="结束日期"
          :picker-options="pickerOptions1">
        </el-date-picker>
      </el-col>
      <el-col :span="3" style="margin-top: 5px;margin-bottom: 5px;">
        <el-select v-model="defectCondition.projectId" clearable @clear="clearProjectId" placeholder="请选择项目" style="width: 120px;">
          <el-option v-for="project in projects" :key="project.projectId" :label="project.projectName"
            :value="project.projectId">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="1" style="margin-top: 5px;margin-bottom: 5px;">
        <el-button @click="getDefectConditionByStateInit()" size="small">查询</el-button>
      </el-col>
    </el-row>



    <el-table
        :data="defectStatement"
        border
        style="width: 1181px;">
        <el-table-column
          prop="defectId"
          label="缺陷编号"
          width="120"
        text-align: center>
        </el-table-column>
        <el-table-column
          prop="defectName"
          label="缺陷名称"
          width="120">
        </el-table-column>
        <el-table-column
          prop="projectName"
          label="项目名称"
          width="120">
        </el-table-column>
        <el-table-column
          prop="priority"
          label="优先级"
          width="120">
        </el-table-column>
        <el-table-column
          prop="serverity"
          label="严重程度"
          width="120">
        </el-table-column>
        <el-table-column
          prop="defectType"
          label="缺陷分类"
          width="120">
        </el-table-column>
        <el-table-column
          prop="defectStateName"
          label="缺陷状态"
          width="120">
        </el-table-column>
        <el-table-column
          prop="defectChoiceName"
          label="指派给"
          width="120">
        </el-table-column>
        <el-table-column
          prop="forwardEndtime"
          label="计划完成时间"
          width="120">
        </el-table-column>
        <el-table-column
              fixed="right"
              label="操作"
              width="100">
              <template slot-scope="scope">
                <el-button @click="choiceMan(scope.row)" type="text" size="small">分配</el-button>
              </template>
        </el-table-column>
      </el-table>


      <el-dialog
        title="缺陷信息"
        :visible.sync="dialogVisibleDefectMessage"
        width="50%"
        hight="100%"
        :before-close="handleClose">
        <el-descriptions title="缺陷信息" border :column=2>
            <el-descriptions-item label="项目名称">{{defectStatementMessage.projectName}}</el-descriptions-item>
            <el-descriptions-item label="缺陷名称">{{defectStatementMessage.defectName}}</el-descriptions-item>
            <el-descriptions-item label="缺陷分类">{{defectStatementMessage.defectType}}</el-descriptions-item>
            <el-descriptions-item label="缺陷状态">{{defectStatementMessage.defectStateName}}</el-descriptions-item>
            <el-descriptions-item label="严重程度">{{defectStatementMessage.serverity}}</el-descriptions-item>
            <el-descriptions-item label="优先级">{{defectStatementMessage.priority}}</el-descriptions-item>
            <el-descriptions-item label="预计开始">{{defectStatementMessage.forwardStarttime}}</el-descriptions-item>
            <el-descriptions-item label="预计结束">{{defectStatementMessage.forwardEndtime}}</el-descriptions-item>
            <el-descriptions-item label="完成率">{{defectStatementMessage.defectCompletionRate}}</el-descriptions-item>
            <el-descriptions-item label="预计工时">{{defectStatementMessage.fowardWorkHours}}</el-descriptions-item>
            <el-descriptions-item label="缺陷描述" :span=24>{{defectStatementMessage.defectDescription}}</el-descriptions-item>
            <el-descriptions-item label="缺陷要求">{{defectStatementMessage.filesDescribe}}</el-descriptions-item>
        </el-descriptions>
        <div class="demo-image__preview">
          <el-image
            style="width: 300px; height: 200px" v-for="(item,index) in defectStatementMessage.imgs" :key="index"
            :src="item" >
          </el-image>
        </div>
        <el-row>
          <el-col>
            <el-select v-model="choiceuser.defectChoiceId" placeholder="请选择员工" style="width: 120px;">
              <el-option v-for="user in choiceusers" :key="user.uid"
                :label="user.uname" :value="user.uid">
              </el-option>
            </el-select>
            <el-select v-model="choiceuser.defectStateId" placeholder="请选择状态" style="width: 120px;">
              <el-option v-for="defectstate in choiceStates" :key="defectstate.defectstateId"
                :label="defectstate.defectstateName" :value="defectstate.defectstateId">
              </el-option>
            </el-select>
          </el-col>
        </el-row>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisibleDefectMessage = false">取 消</el-button>
          <el-button type="primary" @click="ischoiceMan">确 定</el-button>
        </span>
      </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        pickerOptions0: {
          disabledDate: (time) => {
            if (this.defectCondition.createndtime != "" && this.defectCondition.createndtime != null) {
              return this.defectCondition.createndtime.getTime() < time.getTime();
            } else {
              return false;
            }
          }
        },
        pickerOptions1: {
          disabledDate: (time) => {
            if (this.defectCondition.createStarttime != '' && this.defectCondition.createStarttime !=
              null) {
              return time.getTime() < this.defectCondition.createStarttime.getTime();
            } else {
              return false;
            }

          }
        },
        defectCondition: {
          uid:null,
          defectCreatStarttime: null,
          defectCreatendtime: null,
          projectName: null,
          projectId: null,
          createStarttime:null,
          createndtime:null,
        },
        projects: [],
        defectStatement:[],
        defectStatementMessage:{},
        dialogVisibleDefectMessage:false,
        choiceusers:[],
        choiceuser:{
          defectChoiceId:'',
          defectChoiceName:'',
          defectChangenameId:'',
          defectChangename:'',
          defectId:'',
          defectStateId:'',
          defectStateName:''
        },
        choiceStates:[]
      }
    },
    methods: {
      handleCurrentChange(val){
        this.ProjectPage.pageNum=val
        this.getAllProject()
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      getNewDefectByMyProject() {
        var user=JSON.parse(sessionStorage.getItem("user"))
        this.defectCondition.uid=user.uid
        this.$axios.post("/defect/getNewDefectByMyProject",this.defectCondition).then(resp=>{
          this.defectStatement=resp.data.data
        })
      },
      clearProjectId(){
        this.defectCondition.projectId=null
      },
      clearStateId(){
        this.defectCondition.defectStateId=null
      },
      changeStartTime(){
        if(this.defectCondition.createStarttime==null){
          this.defectCondition.defectCreatStarttime=null
        }
      },
      changeEndTime(){
        if(this.defectCondition.createndtime==null){
          this.defectCondition.defectCreatendtime=null
        }
      },
      getDefectConditionByStateInit(){
        var user=JSON.parse(sessionStorage.getItem("user"))
        this.defectCondition.uid=user.uid
        if(this.defectCondition.createStarttime!=null&&this.defectCondition.createndtime!=null){
          this.defectCondition.defectCreatStarttime=this.getDateFormat(this.defectCondition.createStarttime)
          this.defectCondition.defectCreatendtime=this.getDateFormat(this.defectCondition.createndtime)
          this.$axios.post("/defect/getNewDefectByMyProject",this.defectCondition).then(resp=>{
            this.defectStatement=resp.data.data
            this.defectCondition.createStarttime=null
            this.defectCondition.createndtime=null
            this.defectCondition.defectCreatStarttime=null
            this.defectCondition.defectCreatendtime=null
            this.defectCondition.defectStateId=null
            this.defectCondition.projectId=null
          })
        }else if(this.defectCondition.createStarttime==null&&this.defectCondition.createndtime==null){
          this.$axios.post("/defect/getNewDefectByMyProject",this.defectCondition).then(resp=>{
            if(resp.data.flag){
              this.defectStatement=resp.data.data
              this.defectCondition.createStarttime=null
              this.defectCondition.createndtime=null
              this.defectCondition.defectCreatStarttime=null
              this.defectCondition.defectCreatendtime=null
              this.defectCondition.defectStateId=null
              this.defectCondition.projectId=null

            }

          })
        }else{
          this.$message({
                    message: '请选择完整的时间范围',
                    type: 'warning'
                  });
        }

      },
      getDateFormat(mydate){
        var year=mydate.getYear()+1900
        var day=mydate.getDate()+""
        var month=mydate.getMonth()+1+""
        if(month.length==1){
          month="0"+month
        }
        if(day.length==1){
          day="0"+day
        }
        var time=""+year+"-"+month+"-"+day
        return time;
      },
      getMyProjectName(){
        var user=JSON.parse(sessionStorage.getItem("user"))
        this.$axios.get("/project/getMyProjectName/"+user.uid).then(resp=>{
          console.log(resp)
          this.projects=resp.data.data
        })
      },
      choiceMan(defect){
        console.log(defect)
        this.defectStatementMessage=defect
        this.choiceuser.defectId=defect.defectId
        this.$axios.get("/defect/getProjectMan/"+defect.projectId).then(resp=>{
          this.choiceusers=resp.data.data
        })
        this.dialogVisibleDefectMessage=true
      },
      ischoiceMan(){

        var user=JSON.parse(sessionStorage.getItem("user"))

        this.choiceuser.defectChangename=user.uname
        this.choiceuser.defectChangenameId=user.uid
        if(this.choiceuser.defectChoiceId == ""||this.choiceuser.defectChoiceId == null){
          this.$message({
                    message: '未选择分配员工',
                    type: 'warning'
                  });
        }else if(this.choiceuser.defectStateId==null||this.choiceuser.defectStateId==''){
          this.$message({
                    message: '未选择缺陷状态',
                    type: 'warning'
                  });
        }else{
          for(var i=0;i<this.choiceusers.length;i++){
            if(this.choiceusers[i].uid==this.choiceuser.defectChoiceId){
              this.choiceuser.defectChoiceName=this.choiceusers[i].uname
            }
          }
          for(var i=0;i<this.choiceStates.length;i++){
            if(this.choiceStates[i].defectstateId==this.choiceuser.defectStateId){
              this.choiceuser.defectStateName=this.choiceStates[i].defectstateName
            }
          }
          this.$axios.post("/defect/choiceMan",this.choiceuser).then(resp=>{
              if(resp.data.flag){
                this.getNewDefectByMyProject()
                this.dialogVisibleDefectMessage=false
                this.choiceuser.defectChoiceId=''
                this.choiceuser.defectChoiceName='',
                this.choiceuser.defectStateName='',
                this.choiceuser.defectStateId=''
                this.$message({
                          message: '分配成功',
                          type: 'success'
                        });
              }
          })
        }
      },
      getChoiceStates(){
        this.$axios.post("/defectstate/getChoiceStates").then(resp=>{
          console.log(resp)
          this.choiceStates=resp.data.data
        })
      }
    },
    created() {
      this.getNewDefectByMyProject()
      this.getMyProjectName()
      this.getChoiceStates()
    }
  }
</script>

<style>
  .el-icon-search {

    left: -1060px;
  }

  .top_button {
    background-color: #F2F2F2;
    text-align: right;
  }
</style>
